<template>
  <div>
    <div class="searchArea flex">
      <el-form ref="serachForm"
               :model="searchForm"
               :inline="true"
               style="width:98%"
               label-position="left"
               label-width="90px">
        <!-- <el-form-item label="订单时间"
                      prop="timeRange">
          <el-date-picker v-model="searchForm.timeRange"
                          clearable
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"></el-date-picker>
        </el-form-item> -->
         <el-form-item label="编号" prop="recordNum" style="width:30%" >
          <el-input v-model="searchForm.recordNum" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="来源类别"
                      prop="from">
          <el-select v-model="searchForm.from"
                     placeholder="请选择订单来源">
            <el-option v-for="item in resourceType"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态"
                      prop="status">
          <el-select v-model="searchForm.mValue"
                     placeholder="请选择订单状态">
            <el-option v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="action">
          <el-button type='primary'
                     @click="getSampleList">搜索</el-button>
          <el-button type="primary"
                     style="margin:0,15px"
                     @click="dialogFormVisible=true">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--<search :searchForm="searchForm" @search="search">
      <el-button
        slot="addOrder"
        style="background: rgb(7, 131, 241);color: #fff;"
        @click="$router.push('handleOrder')"
      >新增订单</el-button>
    </search>-->
    <div class="applicationList">
      <el-table :data="tableData"
                style="width: 100%"
                height="500"
                stripe
                ref="multipleTable">
        <el-table-column prop="recordNum"
                         label="样品申请单号"
                         align="center"></el-table-column>
        <el-table-column prop="from"
                         label="来源类别"
                         :formatter="formatFrom"
                         align="center"></el-table-column>
        <el-table-column prop="mobile"
                         label="申请账户"
                         align="center"></el-table-column>
        <el-table-column prop="createTime"
                         label="申请时间"
                         :formatter="formatSecond"
                         align="center"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         :formatter="formatStatus"
                         align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150"
                         align="center">
          <template slot-scope="scope" >
              <!-- <el-button type="primary"
                         size="mini"
                         @click="checkDetail(scope.row,scope.$index)">确认发货</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="checkDetail(scope.row,scope.$index)">绑定物流号</el-button> -->
              <el-button type="primary" size="mini"
                         @click="checkDetail(scope.row,scope.$index)">查看详情</el-button>
              <!--<br />
              <el-button type="text" @click="checkTransport(scope.row,scope.$index)">
                <p style="color:blue">查看物流</p>
              </el-button>
              <br />
              <el-button type="text" @click="approvalSuccess(scope.row,scope.$index)" v-if="scope.row.status==0">
                <p style="color:green;">审批通过</p>
              </el-button>
              <br />
              <el-button type="text" @click="approvalFail(scope.row,scope.$index)" v-if="scope.row.status==0">
                <p style="color:red;">审批不通过</p>
              </el-button>
              <br />
              <el-button type="text" @click="addnum(scope.row,scope.$index)" v-if="scope.row.status==0">
                <p style="color:blue;">修改数量</p>
              </el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right;margin-top:20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>
    <el-dialog title="导出订单" :visible.sync="dialogFormVisible">
      <el-form :model="downLoadForm">
        <el-form-item label="订单状态"
                      prop="status">
          <el-select v-model="downLoadForm.mValue"
                     placeholder="请选择订单状态">
            <el-option v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="订单时间"
                        prop="timeRange">
            <el-date-picker v-model="downLoadForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/utils/utils"
import { SAMPLE_MAINLIST,ORDER_DOWNLOADAPPLY } from '@/utils/api';
import search from "@/components/search.vue";
import { formatDate } from '@/utils/validate.js';
import { Message } from 'element-ui'
export default {
  components: { search },
  data () {
    return {
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      resourceType:[{"value":"0","name":"AML"},{"value":"1","name":"商城"}],
      downLoadForm:{
        mValue:[0,1,4],
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      columns: [
        { title: "订单编号", key: "recordNum" },
        { title: "PM姓名", key: "pm" },
        { title: "PM电话", key: "pmMobile" },
        { title: "联系人电话", key: "Mobile" },
        { title: "申请时间", key: "createTime" },
        { title: "状态", key: "status" }],
      options1: [
        { label: "全部", value: '0,1,4' },
        { label: "待审核", value: '0' },
        { label: "待发货", value: '1' },
        { label: "已完成", value: '4' },],
      searchForm: {
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        status: "",
        mValue:'0,1,4',
        isHandle:true
      },
      tableData: [
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      pageSizes: [5, 10, 15, 20]
    };
  },
  created () {
    this.getSampleList()
  },
  methods: {
    downLoadData(){
      ORDER_DOWNLOADAPPLY({
        orderNum:this.downLoadForm.orderNum,
        startTime:Math.floor(new Date(this.downLoadForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.downLoadForm.timeRange[1]).getTime()/1000),
        statusList:this.downLoadForm.mValue.length==0?'0,1,4':this.downLoadForm.mValue,
        deliveryside:1
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
    searchSubmit () {
      this.$message.error("功能完善中")
      /*var _this=this
      var promise=new Promise(function(resolve,reject){
        _this.currentPage=1
        _this.pageSize=_this.total
        _this.getSampleList()
      })
      promise().then(res=>{
        var searchlist=[]
        for (let i in this.tableData){
        if (this.tableData[i].status==this.searchForm.status){
          searchlist.push(this.tableData[i])
        }
      }
      this.tableData=searchlist
      })*/
    },
    export2excel () {
      export2Excel(this.columns, this.tableData)
    },
    getSampleList () {
      SAMPLE_MAINLIST({
        recordNum:this.searchForm.recordNum,
        from:this.searchForm.from,
        statusList:this.searchForm.mValue.length==0?[1,2,3,8]:this.searchForm.mValue,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        deliveryside:1
      }).then(res => {
        console.log(res, 'resssss')
        this.loading = false
        this.tableData = res.data.dataList
        this.total = res.data.count
      })
    },
    //时间格式化  
    formatSecond (row, column) {
      var second = row[column.property];
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
    // 订单状态格式化
    formatStatus (row, column) {
      var status = row[column.property]
      switch (status) {
        case 0: return '待审核'
        case 1: return '待发货'
        case 2: return '已婉拒'
        case 3: return '待发货'
        case 4: return '已完成'
        case 5: return '待评价'
        default: return '未知'
      }
    },
    formatFrom (row, column) {
      var status = row[column.property]
      switch (status) {
        case 0: return 'AML'
        case 1: return '商城申请'
      }
    },
    // 审批订单
    approvalOrder (orderId, approvalType, remark) {
      SAMPLE_AUTH({
        recordId: orderId,
        authType: approvalType,
        remark: remark
      }).then(res => {
        console.log("res : " + JSON.stringify(res))
        if (200 == res.status) {
          this.$message.success("操作成功")
          this.$router.push({ path: "exapply" })
        } else {
          this.$message.error("操作失败")
        }
      })
    },
    checkDetail (row, index) {//查看详情
      this.$router.push({
        path: "exorderApplySendDetail",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    checkTransport (row, index) {
      //    this.$router.push('transportation')
      Message({ message: '该功能暂未开放', type: 'error', duration: 2000 })
    },
    approvalSuccess (row, index) {
      this.$prompt('请输入审核意见', '审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.approvalOrder(row.id, 1, value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    approvalFail (row, index) {
      this.$prompt('请输入审核意见', '审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.approvalOrder(row.id, 2, value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    addnum (row, index) {
      this.$prompt('请输入修改数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        MODIFYCOUNT({
          recordId: row.id,
          count: value
        }).then(res => {
          this.getSampleList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getSampleList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getSampleList()
    }
  }
};
</script>

<style lang="scss" scoped>
.applicationList {
  width: 100%;
  background: #fff;
  padding: 20px 2px;
  border-radius: 5px;
  box-shadow: 2px 3px 15px 0 #ccc;
}
.searchArea {
  width: 100%;
  padding: 15px 0;
  margin-top: 15px;
  justify-content: center;
  background: #eee;
  padding-bottom: 0;
}
</style>


